﻿@using ForzaGT3.Data
@model Series
@{
    ViewBag.Title = "Details";
    Guid circuitId = Model.Circuit.CircuitId;
    string lang = string.Empty;
    if (!string.IsNullOrEmpty(Request.QueryString["lang"]))
    {
        lang = Request.QueryString["lang"];
    }
}
<div class="redbg header shadow">
    @Model.Title
</div>
<img src="@Url.Content("~" + Model.BannerUrl)" alt="@Model.Title" />
<div class="greybgtxt" style="margin-top: -3px;">
    <div id="tab">
        <ul>
            <li><a href="#tabs-1">Information</a></li>
            <li><a href="#tabs-2">Track</a></li>
        </ul>
        <div id="tabs-1">
            
                @MvcHtmlString.Create(Model.Remarks)
            
            
        </div>
        <div id="tabs-2">            
            <div id="map-canvas">
            </div>
            <div id="circuit-info">
                <img src="@Url.Content("~" + Model.Circuit.ImageUrl)" alt="@Model.Circuit.Name" />
                <div class="text">
                    @MvcHtmlString.Create(Model.Circuit.Remarks)
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var map
    var markersArray = [];
    function initGoogleMap(circuitId) {
        var indonesia = new google.maps.LatLng(0, 118.07928126464844);

        var myOptions = {
            zoom: 14,
            center: indonesia,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

        getLocationData(circuitId);
    }

    function getLocationData(circuitId) {
        var url = "/Circuit/GetById";
        $.ajax({
            type: "GET",
            url: url,
            data: { Id: circuitId },
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                setMarker(data);
                
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError);
            }
        });
    }

    function setMarker(data) {
        var lat = parseFloat(data.Latitude);
        var lon = parseFloat(data.Longitude);
        var markerLoc = new google.maps.LatLng(lat, lon);


        var marker = new google.maps.Marker({
            map: map,
            position: markerLoc
        });

        markersArray.push(marker);
        marker.setMap(map);

        map.setCenter(markerLoc);
    }

    $(document).ready(function () {
        initGoogleMap('@circuitId');
        $("#tab").tabs();
    });
</script>
